<template>
  <view class="profile-container">
    <!-- 个人信息编辑区 -->
    <view class="profile-edit-section">
      <!-- 头像编辑 -->
      <view class="profile-item avatar-item">
        <text class="item-label">头像</text>
        <view class="avatar-wrapper">
          <image class="avatar-image" :src="userInfo.avatarUrl || ''"></image>
          <button open-type="chooseAvatar" @chooseavatar="chooseavatar" class="avatar-wrapper_button"></button>
        </view>
      </view>
      
      <!-- 用户名编辑 -->
      <view class="profile-item">
        <text class="item-label">用户名</text>
        <view class="item-content">
          <input type="nickname" v-model="userInfo.nickName" placeholder="请输入用户名" class="input-field" />
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @tap="saveProfile">保存修改</button>
    </view>
	
  </view>
</template>

<script>
	import { userStore } from "../../store/userStore";
	import { upload } from "../../api/request/request";
	const user = userStore()
export default {
  data() {
    return {
      
    }
  },
  computed:{
	userInfo(){
		return user.userInfo
	}  
  },
  methods: {
    
    // 选择头像来源
	chooseavatar(e){
		let img = e.detail.avatarUrl
		upload(img).then((res)=>{
			user.setInfo({
				avatarUrl:res.file_path
			})
		})
	},
    
    // 保存个人资料
    saveProfile() {
      // 表单验证
      if (!this.userInfo.nickName) {
        uni.showToast({
          title: '请输入昵称',
          icon: 'none'
        });
        return;
      }
      user.setInfo({
      	nickName:this.userInfo.nickName
      }).then(()=>{
		  uni.showToast({
		    title: '保存成功',
		    icon: 'none'
		  });
	  })
    }
  }
}
</script>

<style lang="scss">
.profile-container {
  background-color: #F8F6F1; /* 米白色背景 */
  min-height: 100vh;
  padding-bottom: 100rpx;
}

/* 顶部导航 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #FFFFFF;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn image {
  width: 32rpx;
  height: 32rpx;
}

.page-title {
  font-size: 32rpx;
  color: #4D3F33;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.placeholder {
  width: 60rpx;
}

/* 个人信息编辑区 */
.profile-edit-section {
  margin: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  padding: 20rpx 0;
}

.profile-item {
  display: flex;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #EEEAE0;
  align-items: center;
}

.profile-item:last-child {
  border-bottom: none;
}

.item-label {
  width: 160rpx;
  font-size: 28rpx;
  color: #4D3F33;
}

.item-content {
  flex: 1;
}

/* 头像编辑 */
.avatar-item {
  align-items: center;
}

.avatar-wrapper {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  overflow: hidden;
  background-color: #EEEAE0;
  &_button{
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
  	position: absolute;
  	background-color: transparent;
  }
}

.avatar-image {
  width: 100%;
  height: 100%;
}

.avatar-edit-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 70rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #78A77F;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-edit-icon image {
  width: 20rpx;
  height: 20rpx;
}

/* 输入框样式 */
.input-field {
  height: 60rpx;
  font-size: 28rpx;
  color: #4D3F33;
}

/* 提交按钮 */
.submit-section {
  padding: 40rpx 30rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(135deg, #78A77F, #6B9473);
  color: #FFFFFF;
  font-size: 32rpx;
  border-radius: 45rpx;
  box-shadow: 0 10rpx 20rpx rgba(120,167,127,0.3);
}

/* 头像选择弹窗 */
.avatar-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}

.avatar-modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0 0;
  z-index: 101;
}

.avatar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #EEEAE0;
}

.avatar-modal-title {
  font-size: 32rpx;
  color: #4D3F33;
}

.avatar-modal-close {
  font-size: 40rpx;
  color: #A89B88;
  padding: 0 20rpx;
}

.avatar-options {
  display: flex;
  justify-content: space-around;
  padding: 60rpx 30rpx;
}

.avatar-option {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-option image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
}

.avatar-option text {
  font-size: 28rpx;
  color: #4D3F33;
}

/* 禅意头像选择弹窗 */
.zen-avatar-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 102;
}

.zen-avatar-modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  z-index: 103;
}

.zen-avatar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #EEEAE0;
}

.zen-avatar-modal-title {
  font-size: 32rpx;
  color: #4D3F33;
}

.zen-avatar-modal-close {
  font-size: 40rpx;
  color: #A89B88;
  padding: 0 20rpx;
}

.zen-avatar-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}

.zen-avatar-item {
  width: 33.33%;
  padding: 10rpx;
  box-sizing: border-box;
  position: relative;
}

.zen-avatar-item image {
  width: 100%;
  height: 160rpx;
  border-radius: 12rpx;
  border: 2rpx solid transparent;
}

.zen-avatar-item.selected image {
  border-color: #78A77F;
}

.zen-avatar-check {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #78A77F;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zen-avatar-check image {
  width: 24rpx;
  height: 24rpx;
  border: none;
}

.zen-avatar-modal-footer {
  display: flex;
  padding: 20rpx 30rpx 30rpx;
}

.zen-avatar-cancel, .zen-avatar-confirm {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  border-radius: 40rpx;
  margin: 0 10rpx;
}

.zen-avatar-cancel {
  background: #F0EEEA;
  color: #A89B88;
}

.zen-avatar-confirm {
  background: #78A77F;
  color: #FFFFFF;
}
</style>